﻿@{
    ViewBag.Title = "My Whish";
    Layout = "~/Views/Shared/_SiteGoodLayout.cshtml"; 
}

<div style="width: 45%; float:left; position:relative; top: 60px; margin-left: 60px;">   
    <h2 class="blue-font-title" style="margin-left: 0;">My Whish List</h2>
    <script type="text/javascript">
        var data = @(Html.Raw(Json.Encode(Model)))
    </script>

    <script src="~/Scripts/knockout-2.2.1.js"></script>
    <script src="~/Scripts/knockout.validation.js"></script>
    <form data-bind="submit: addWishList">
        @*<p data-bind="css: { error: firstName.hasError }">*@
        <table>
            <tr>
                    <td>
                    Latitude:
                </td>
                <td>
                        <input id="lat" style="width:100px;" data-bind='value: latitudeNew, valueUpdate: "afterkeydown", visible: id() == 0' />
                        <input style="width:100px;" data-bind='value: latitude, event:{ change: editWishList}, visible: id() != 0' />
    @*                <span data-bind='visible: latitude.hasError, text: latitude.validationMessage'> </span>*@
                </td>
            </tr>
            <tr>
                    <td>
                    Longitude:
                </td>
                <td>
                        <input id="long" style="width:100px;" data-bind='value: longitudeNew, valueUpdate: "afterkeydown", visible: id() == 0' />
                        <input style="width:100px;" data-bind='value: longitude, event:{ change: editWishList}, visible: id() != 0' />
    @*                <span data-bind='visible: longitude.hasError, text: longitude.validationMessage'> </span>*@
                </td>
            </tr>
            <tr>
                    <td>
                    Search Radius:
                </td>
                <td>
                        <input style="width:100px;" data-bind='value: radiusNew, valueUpdate: "afterkeydown", visible: id() == 0' />
                        <input style="width:100px;" data-bind='value: radius, event:{ change: editWishList}, visible: id() != 0' />
    @*                <span data-bind='visible: radius.hasError, text: radius.validationMessage'> </span>*@
                </td>
            </tr>
            @*<tr>
                <td style="text-align: right">
                    SiteId:</td>
                <td>
                    <span data-bind='text: siteId'></span>
                </td>
            </tr>
            <tr>
                <td style="text-align: right">
                    UserId:</td>
                <td>
                    <span data-bind='text: userId'></span>
                </td>
            </tr>*@
        </table>
     
        <div style="font-size: 10px;" data-bind="visible: id() == 0">Create your wish before adding attributes.</div>
            <button class="btn btn-primary" type="submit" data-bind="visible: id() == 0">Create My Wish</button>
    </form>

    <h3 class="blue-font-title" style="margin-left: 0;" data-bind="visible: criterions().length > 0">Criterions</h3>
    <table data-bind="foreach: criterions, visible: criterions().length > 0">
        <tr>
            <td style="text-align: right">
                @*<span data-bind="text: id" ></span>
                <span data-bind="text: SiteAttributeId" ></span>*@
                <span data-bind="text: SiteAttributeName" ></span>
            </td>
            <td>
                <input data-bind="value: Value, event:{ change: $parent.editCriterion }" />
                @*<span data-bind='visible: value.hasError, text: value.validationMessage'> </span>*@
                    <a class="btn btn-primary" style="color: #fff;font-size: 14px;font-family: Sans-Serif;font-weight: bold;" href="#" data-bind="click: $parent.removeCriterion">Delete</a>
            </td> 
        </tr>
    </table>

    <form data-bind="submit: addCriterion, visible: id() != 0">
            <h4 class="blue-font-title" style="margin-left: 0;">New Criterion</h4>
            <p>
                <select style="width: 230px; margin-top: 0px;" data-bind="options: notAssignedAttributes, value: newCriterionAttribute, optionsText: 'Name'"></select>
            </p>
        <p>
                <input style="width: 218px; margin-top: 0px;" data-bind='value: newCriterionValue, valueUpdate: "afterkeydown"' />
            @*<span data-bind='visible: newCriterionValue.hasError, text: newCriterionValue.validationMessage'> </span>*@
        </p>
        <p>
                <button class="btn btn-primary" type="submit">Add Criterion</button>
        </p>
    </form>
    <div>
        <p class="blue-font not-transform-text">
            @Html.ActionLink("Back", "MyWishList", (string)ViewBag.Name)
        </p>
    </div>
</div>
<div style="width: 45%; float:right; position:relative; top: 60px;">  
    <div id="map_canvas" style="width: auto; height: 250px; position:relative; display:block; background: #eee; border: 1px solid #e3e3e3;"></div>        
</div>

@section scripts {
    <script src="~/Scripts/jquery.signalR-1.1.2.js"></script>
    <script src="~/signalr/hubs"></script>

    <script src="~/ViewModel/WishListsVM.js"></script>

<script type="text/javascript">
    function CrearMapa() {
        var mapOptions = {
            center: new google.maps.LatLng(@Model.Latitude.ToString().Replace(",", ".") , @Model.Longitude.ToString().Replace(",", ".")),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var dr = new google.maps.Marker({
            position: new google.maps.LatLng(@Model.Latitude.ToString().Replace(",", ".") , @Model.Longitude.ToString().Replace(",", ".")),
            map: map, 
            draggable: true
        });
        google.maps.event.addListener(
            dr,
            'drag',
            function () {
                document.getElementById('lat').value = dr.position.lat();
                document.getElementById('long').value = dr.position.lng();
            }
        );
    }

    window.onload = function () {
        CrearMapa();
    };

</script>
}